<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<!-- 
            条件渲染:
                    1.v-if
                            写法:
                                (1).v-if="表达式"
                                (2).v-else-if="表达式"
                                (3).v-else="表达式"
                            适用于:切换频率较低得场景
                            特点:不展示得dom结构直接移除掉
                            注意:v-if可以和v-else-if v-else一起使用,但是要求结构不能被"打断"

                    2.v-show
                            写法:v-show="表达式"
                            适用于:切换频率较高的场景
                            特点:不展示dom的元素不被移除,仅仅是使用样式隐藏掉

                    3.备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到.
                    

 -->

<body>


    <div id="root">
        <!-- 使用v-show做条件渲染 -->
        <h2 v-show="show"> {{name}}</h2>

        <!-- 使用v-if做条件渲染(v-if v-else-if v-else)都是一组,一旦有一个成立其他就不成立了,而且中间不允许有其他div打断,一但打断后边就不奏效了 -->
        <h2 v-if="show"> {{name}}</h2>
        <h2 v-else-if="!show"> 一但if成立了,我这里就直接跳过,解析下边模板了</h2>
        <h2 v-else>前边判断都没有成立,我就成立了</h2>
        <button @click="controlShow">点击我控制显隐</button>


        <!-- 两个都能做条件渲染,但是只能是v-if可以和template配合,因为template是假的包裹,一到网页上就会消失掉 -->
        <template v-if="show">
            我是template
        </template>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                show: true,
                name: "名师"
            },
            methods: {
                controlShow() {
                    this.show = !this.show
                }
            }
        })
    </script>

</body>

</html>